<template>
    <div class="banner">
        <div class="banner_box">
            <!-- 左侧菜单区 -->
            <div class="banner_left_muen">
                <Muen></Muen>
            </div>
            <!-- 轮播图 -->
            <div class="wrap">
                <ul class="list">
                    <!-- 图片-->
                    <li class="item" v-for="item in Imglist" :key="item.url">
                        <a><img :src="item.url" alt=""></a>
                    </li>
                </ul>
                <!-- 按钮切换 -->
                <button class="btn1" id="goPre"><i class="el-icon-arrow-left"></i></button>
                <button class="btn" id="goNext"><i class="el-icon-arrow-right"></i></button>
                <!-- 小圆点 -->
                <ul class="pointList">
                    <li class="point" v-for="item in listindex" :key="item"></li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>

// 引入轮播图JS
import '../assets/JS/lbt'
import Muen from './Muen';
export default {
    name: "Banner",
    components: {Muen},
    data() {
        return {
            // 轮播图列表
            Imglist: [
                { url: require("../assets/BannerImg/Banner01.png") },
                { url: require("../assets/BannerImg/Banner02.png") },
                { url: require("../assets/BannerImg/Banner03.png") },
                { url: require("../assets/BannerImg/Banner04.png") },
                { url: require("../assets/BannerImg/Banner01.png") },
            ],
            listindex: 5,
        };
    },
   
}
</script>

<style scoped>
    .banner{
        position: relative;
        width: 100%;
        height: 460px;
    }
    .banner_box{
        margin: 0 auto;
        width:1226px;
        height: 460px;
    }

    .banner_left_muen{
        position: absolute;
        z-index: 2;
    }




    /* 轮播图 */
    
    .wrap{
            position: relative;
            width:100%;
            height:100%;
            overflow: hidden;
            
        }
        
        .wrap .list {
            position: relative;
            width: 100%;
            height: 100%;
            
        }
        
        .wrap .list .item {
            position: absolute;
            opacity: 0;
            transition: all 1s;
        }
        
        .wrap .list .item>a>img {
            width: 100%;
            height: 100%;
        }
        
           .wrap .btn {
            width: 50px;
            height: 70px;
            position:absolute;
            top: 50%;
            color: #fff;
            font-weight: 800;
            transform: translate(0, -50%);
            font-family: 'iconfont';
            font-size: 20px;
            border: none;
            z-index: 1;
            text-align: center;
            cursor: pointer;
             background-color: rgba(24, 24, 24, 0.08);
        }
        .banner_box .wrap .btn1{
            width: 46px;
            height: 70px;
            position:absolute;
            top: 50%;
            left: 240px;
            color: #fff;
            font-weight: 800;
            transform: translate(0, -50%);
            font-family: 'iconfont';
            font-size: 20px;
            border: none;
            z-index: 1;
            text-align: center;
            cursor: pointer;
            background-color: rgba(24, 24, 24, 0.08);
         }
        .wrap #goPre {
           
            outline:none;
            border-radius:  0 100% 100% 0 ;
        }
         .wrap #goPre:hover{
           background-color: rgba(24, 24, 24, 0.297);
        }
        .wrap #goNext:hover{
          background-color: rgba(24, 24, 24, 0.297);
        }
        .wrap #goNext {
            right: -5px;
            outline:none;
            border-radius: 100% 0 0 100%;
           
        }
        
        .wrap .list .active {
            z-index: 1;
            opacity: 1;
        }
        
        .wrap .pointList {
            position: absolute;
            bottom: 25px;
            right:40px;
            transform:translate(-50%, 0);
            z-index: 1;
        }
        
        .wrap .pointList .point {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 12px;
            border: 2px solid #fff;
            background-color: #fff;
            cursor: pointer;
            transition: all 1s;
        }
        
        .wrap .pointList .current {
            background-color: coral;
            transform: scale(1.2);
        }

</style>